<template>
  <div>

    <div id="main"
         style="width: 750px;height:400px;"></div>

  </div>
</template>

<script>
// 注意，以下写法固定，不能写错

export default {

  name: 'QuantityCharts',
  components: {},
  data() {
    return {
      // 横坐标数据
      categoryNameList: [],
      // 纵坐标数据
      productCountList: [],
      dataList: []
    }
  },
  created() { },
  methods: {
    myEcharts() {
      let nameList = []
      let countList = []
      this.getRequest("/product/api/getSevenDaysReleaseCountGroupByCategory")
        .then(res => {
          if (res.code === 200 && res.msg === "success") {
            this.dataList = res.data;
            for (var i = 0; i < this.dataList.length; i++) {
              this.categoryNameList[i] = this.dataList[i].name;
              this.productCountList[i] = this.dataList[i].count;
            }
             nameList = this.categoryNameList;
            countList = this.productCountList;

            console.log(nameList);
            // 基于准备好的dom，初始化echarts实例
            var myChart = this.$echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
              title: {
                text: '近七天用户用户发布产品的分类数量统计'
              },
          
              tooltip: {},
              legend: {
                data: ['销量']
              },
              xAxis: {
                 axisLabel :{interval:0},
                name: "分类",
                data: nameList
              },
              yAxis: {},
              series: [{
                name: '数量',
                type: 'bar',
                data: countList
              }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

          } else {
            this.$message.error("获取数据失败");
          }
        }).catch(err => {
          this.$message.error("获取数据失败");
        });



    }

  },
  mounted() {
    this.myEcharts();
  }
}

</script>

<style scoped>
</style>